<template>
    <div class="original">
        <!--头部 -->
         <div class="name" @click="$router.go(-1)">书程小驿</div>

         <div class="header">
      <div class="containor">
        <div class="name"></div>
        <ul class="category">
          <li v-for="(category, index) in categories" :key="index">
            {{ category.name }}
          </li>
        </ul>
        <div class="telephone">
          <img
            src="../assets/telephone.png"
            alt="图片丢失"
            width="25px"
            height="25px"
          />
          <span>联系我们</span>
        </div>
      </div>
    </div>
    <div class="swipper">
      <el-carousel height="470px">
        <el-carousel-item v-for="(item, index) in carousel" :key="index">
          <img :src="item.url" alt="图片丢失" />
        </el-carousel-item>
      </el-carousel>
    </div>
    
    <h1>原创佳品</h1>
        <div class="test">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center"><img src="http://47.109.18.97/images/fhn1.jpg.png"  height="200" /> </td>
    <td align="center"><img src="http://47.109.18.97/images/fhn2.jpg.png" height="200" /></td>
    <td align="center"><img src="http://47.109.18.97/images/fhn3.jpg.png" height="200" /></td>
    <td align="center"><img src="http://47.109.18.97/images/fhn4.jpg.png" height="200" /></td>
    <td align="center"><img src="http://47.109.18.97/images/fhn5.jpg.png" height="200" /></td>
    
  </tr>
  <tr>
    <td align="center"><h1>追风筝的人</h1><br>卡勒德.胡赛尼 著<el-collapse>
  <el-collapse-item title="简介" name="1">
    <div>故事的主角是两名来自阿富汗的少年<br>因为战争他们移民到了美国<br>不过却在时代的变化之中，逐渐的迷失了自我。</div>
  </el-collapse-item>
  </el-collapse>
  </td>
    <td align="center"><h1> 杀死一只知更鸟</h1><br>哈珀·李发 著<el-collapse>
  <el-collapse-item title="简介" name="1">
    <div>美国最经典的文学作品之一。<br>故事的主人公被人冤枉，<br>想要为自己平冤昭雪<br>却最终遗憾而死。
</div>
  </el-collapse-item>
  </el-collapse></td>
    <td align="center"><h1> 守望之心</h1>哈珀李 著<el-collapse>
  <el-collapse-item title="简介" name="1">
    <div>美国传奇作家哈珀李的经典小说，<br>故事的主人公回到乡下，<br>从而通过回忆，<br>揭发了一段尘封的往事。</div>
  </el-collapse-item>
  </el-collapse></td>
    <td align="center"><h1>摆渡人</h1>克莱儿·麦克福尔 著<el-collapse>
  <el-collapse-item title="简介" name="1">
    <div>英国最著名的小说之一，<br>通过主角们的遭遇，<br>表达出了对于亲情、爱情和友情的感悟。</div>
  </el-collapse-item>
  </el-collapse></td>
    <td align="center"><h1> 牧羊少年奇幻之旅</h1>黑山老鬼 著<el-collapse>
  <el-collapse-item title="简介" name="1">
    <div>　故事的主人公是一名牧羊少年，<br>他听说自己所在的土地下埋藏着宝藏，<br>于是开始了一场奇幻大冒险。</div>
  </el-collapse-item>
  </el-collapse></td>
  </tr>
</table>
        </div>
        <el-divider></el-divider>
<h1>原创精品</h1>
        <div class="test">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center"><img src="http://47.109.18.97/images/fhn6.jpg.png"  height="200" /> </td>
    <td align="center"><img src="http://47.109.18.97/images/fhn7.jpg.png" height="200" /></td>
    <td align="center"><img src="http://47.109.18.97/images/fhn8.jpg.png" height="200" /></td>
    <td align="center"><img src="http://47.109.18.97/images/fhn9.jpg.png" height="200" /></td>
    <td align="center"><img src="http://47.109.18.97/images/fhn10.jpg.png" height="200" /></td>
    
  </tr>
  <tr>
    <td align="center"><h1> 一只特立独行的猪</h1><br>王小波 著<el-collapse>
  <el-collapse-item title="简介" name="1">
    <div>王小波最经典的作品之一，<br>属于他的短篇作品收录，<br>表达了他特立独行的人生态度。</div>
  </el-collapse-item>
  </el-collapse>
  </td>
    <td align="center"><h1>我的精神家园</h1><br>王小波 著<el-collapse>
  <el-collapse-item title="简介" name="1">
    <div>王小波的自选集，<br>由他的短篇小说、杂文等组成，<br>为读者展现了王小波的内心世界。
</div>
  </el-collapse-item>
  </el-collapse></td>
    <td align="center"><h1>围城</h1>钱钟书 著<el-collapse>
  <el-collapse-item title="简介" name="1">
    <div>钱钟书的经典作品之一，<br>故事的背景设定在抗日战争时期，<br>主人公是一群知识分子，<br>非常的具有讽刺意义。</div>
  </el-collapse-item>
  </el-collapse></td>
    <td align="center"><h1>人生的枷锁</h1>威廉·萨默赛特·毛姆 著<el-collapse>
  <el-collapse-item title="简介" name="1">
    <div>故事的主人公生活在一个封建的大家庭之中，<br>在自己短暂的30年时间里，<br>因为各种制度而束缚住了自己，<br>想要挣脱却发现已经无能为力。</div>
  </el-collapse-item>
  </el-collapse></td>
    <td align="center"><h1> 无人生还</h1>阿加莎·克里斯蒂 著<el-collapse>
  <el-collapse-item title="简介" name="1">
    <div>世界最知名的意识流小说之一，<br>讲述了一个荒岛上一桩离奇的杀人案件。</div>
  </el-collapse-item>
  </el-collapse></td>
  </tr>
</table>
        </div>
</div>

</template>

<script>
import { get } from "@/utils/request.js";
export default {
  data() {
    return {
         categories: [],
         carousel: []
    };
    },
    methods: {
    // 查询所有栏目信息
    findAllCategories() {
      // 使用axios封装的get方法，发送ajax请求，拿到所有的栏目数据
      get("/index/category/findAll").then((res) => {
        // 将后台接口响应的数据，设置到组件的数据模型中
        this.categories = res.data;
      });
    },
    findAllCarousel() {
      get("/index/carousel/findAll").then((res) => {
        // 将后台响应的轮播图数据，设置到组件的数据模型中
        this.carousel = res.data;
      });
    },
    },
    created() {
    // 调用查询所有栏目信息的方法
    this.findAllCategories();
     this.findAllCarousel();
    },
    
};
</script>
<style scoped>
.header {
  /* display: flex; */
  height: 80px;
  font-family: "微软雅黑";
  box-shadow: 0 0 5px 5px rgba(153, 153, 153, 0.329);
}
.containor {
  width: 90%;
  margin: 0 auto;
  height: 80px;
}
/* 为因为子元素浮动产生高度塌陷的父元素清除浮动 => 使用伪元素来清除浮动 */
.containor::after {
  display: block;
  clear: both;
  content: "";
}
.name {
  float: left;
  font-size: 22px;
  font-weight: bold;
  color: #555;
  height: 80px;
  line-height: 80px;
  cursor: pointer;
}
.category {
  float: left;
  display: flex;
  margin: 0;
  padding: 0 1em;
  height: 80px;
  line-height: 80px;
  font-size: 18px;
  color: #666;
}
.category > li {
  padding: 0 16px;
  cursor: pointer;
}
.telephone {
  float: right;
  height: 80px;
  line-height: 80px;
  font-size: 18px;
  font-weight: bold;
  color: #888;
  cursor: pointer;
}
.telephone > img {
  position: relative;
  top: 5px;
  margin-right: 10px;
}
.xs{
 cursor: pointer;   
}

</style>